<template>
  <div>
    <el-button type="success" @click="showDialog">{{ $t('库存变更记录') }}</el-button>
    <el-dialog
      append-to-body
      :title="$t('库存变更记录')"
      :visible.sync="dialog"
      width="1300px"
    >
      <div>
        <el-radio-group v-model="currentTab" @change="handleClick" class="mgb10" size="medium">
          <el-radio-button
            v-for="item in tabList"
            :key="item.label"
            :label="item.label"
          >
            {{item.text}}
          </el-radio-button>
        </el-radio-group>
      </div>

        <div class="mgb20">
          {{ $t('common.类型') }}：
          <el-select v-model="queryParams.type" multiple :placeholder="$t('common.请选择')" @change="changeOption" style="width: 250px">
            <el-option :label="$t('货件新增')" :value="1"></el-option>
            <el-option :label="$t('订单消耗')" :value="2"></el-option>
            <el-option :label="$t('手动修改')" :value="5"></el-option>
            <el-option :label="$t('拣货退回')" :value="6"></el-option>
            <el-option :label="$t('箱转混装')" :value="7"></el-option>
            <el-option :label="$t('订单退回')" :value="8"></el-option>
          </el-select>
        </div>

        <el-table
          ref="goodsTable"
          :data="boxData"
          :border="true"
          row-key="id"
          :key="currentTab"
          v-loading="loading"
          @sort-change="handleSortChange"
        >
          <el-table-column
            prop="createTime"
            :label="$t('table.变更时间')"
            align="center"
            min-width="120"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            prop="type"
            :label="$t('common.类型')"
            align="center"
            min-width="100"
          >
            <template v-slot="{row}">
              {{getStockType(row.type)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="boxId"
            label="箱唛"
            min-width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="boxType"
            label="货箱类型"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="goodsId"
            :label="$t('table.ListingIDAndSKU')"
            align="center"
            min-width="200"
          >
            <template v-slot="{row}">
              <template v-if="row.isSystemLabel">
                {{ $t('shipment.System label') }} ({{row.sku}})
              </template>
              <template v-else-if="row.isTB">
                {{ $t('shipment.Not labeled') }} {{row.sku ? `(${row.sku})` : ''}}
              </template>
              <template v-else>
                {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
              </template>
            </template>
          </el-table-column>

          <el-table-column
            prop="beforeNum"
            :label="$t('table.变更前库存数量')"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="num"
            :label="$t('table.变更数量')"
            align="center"
            min-width="100"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            prop="afterNum"
            :label="$t('table.变更后库存数量')"
            align="center"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="remark"
            :label="$t('table.备注')"
            align="center"
            min-width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="adminAccount"
            label="操作员"
            align="center"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="boxTotal"
          @current-change="getData"
        >
        </el-pagination>


    </el-dialog>
  </div>
</template>

<script>
import {getBoxStockLog, getStockLog} from "@/api/stock";
import {deepCopy} from "@/utils";
import {getBoxStockType, getStockType} from "@/utils/stock";
import request from "@/utils/request";

export default {
  name: "StockLogDialogV2",
  props:{
    suitId: {
      required: true,
      type: Number,
    }
  },
  data(){
    const tabList = [
      {label: 'stock', text: '代发库存（已上架）'},
      {label: 'middleStock', text: '暂存库存（已上架）'},
      {label: 'fullStock', text: '待送仓库存'},
    ]
    return {
      dialog: false,
      loading: false,
      queryParams: {
        page: 1,
        pageSize: 20,
        suitId: 0,
        type: [],
        orderBy: '',
        orderField: '',
      },
      data: [],
      total: 0,
      currentTab: tabList[0].label,

      boxData: [],
      boxTotal: 0,
      tabList,
    }
  },
  methods: {
    getStockType,
    showDialog(){
      this.dialog = true;
      this.queryParams.suitId = this.suitId

      this.getData()
    },
    getData(){
      this.loading = true
      this.queryParams.suitId = 5518
      request({
        url: '/stock/getBoxLabelGoodsLog',
        params: this.queryParams,
      })
        .then(res=>{
          this.loading = false
          this.boxData = res.data
          this.boxTotal = res.info.total
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
    handleSortChange(column){
      this.queryParams.orderBy = '';
      this.queryParams.orderField = '';
      if(column.order){
        this.queryParams.orderBy = column.order;
        this.queryParams.orderField = column.prop
      }
      this.changeOption()
    },
    handleBoxSortChange(column){
      this.boxQueryParams.orderBy = '';
      this.boxQueryParams.orderField = '';
      if(column.order){
        this.boxQueryParams.orderBy = column.order;
        this.boxQueryParams.orderField = column.prop
      }
      this.changeOption()
    },
    handleClick(){
      this.changeOption()
    },
  },
}
</script>

<style scoped lang="scss">

</style>
